<div class="page-wrapper">
  <!--  box -->
  <div class="container simple-box">
    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
      <!--  panel -->
      <div class="panel panel-default">
        <div class="panel-body">
          <form class="simple-box-form form-horizontal" name="updatePasswordForm">
          <!-- note -->
          <div class="form-group">
            <div class="col-sm-12">
              <span class="small text-muted">
                Your password must be updated.
              </span>
            </div>
          </div>
          <!-- !note -->
          <!-- current-password-input -->
          <div class="form-group">
            <label for="current_password" class="col-sm-4 control-label text-left">Current password</label>
            <div class="col-sm-8">
              <input type="password" class="form-control" ng-model="formValues.CurrentPassword" id="current_password" auto-focus required>
            </div>
          </div>
          <!-- !current-password-input -->
          <!-- new-password-input -->
          <div class="form-group">
            <label for="password" class="col-sm-4 control-label text-left">Password</label>
            <div class="col-sm-8">
              <input type="password" class="form-control" ng-model="formValues.Password" id="password" required>
            </div>
          </div>
          <!-- !new-password-input -->
          <!-- confirm-password-input -->
          <div class="form-group">
            <label for="confirm_password" class="col-sm-4 control-label text-left">Confirm password</label>
            <div class="col-sm-8">
              <div class="input-group">
                <input type="password" class="form-control" ng-model="formValues.ConfirmPassword" id="confirm_password" required>
                <span class="input-group-addon"><i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[formValues.Password !== '' && formValues.Password === formValues.ConfirmPassword]" aria-hidden="true"></i></span>
              </div>
            </div>
          </div>
          <!-- !confirm-password-input -->
          <!-- note -->
          <div class="form-group">
            <div class="col-sm-12">
              <span class="small text-muted">
                <i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[formValues.Password.length >= 8]" aria-hidden="true"></i>
                The password must be at least 8 characters long
              </span>
            </div>
          </div>
          <!-- !note -->
          <!-- actions -->
          <div class="form-group">
            <div class="col-sm-12">
              <button type="submit" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !updatePasswordForm.$valid || formValues.Password.length < 8 || formValues.Password !== formValues.ConfirmPassword" ng-click="updatePassword()" button-spinner="state.actionInProgress">
                <span ng-hide="state.actionInProgress">Update password</span>
                <span ng-show="state.actionInProgress">Updating password...</span>
              </button>
            </div>
          </div>
          <!-- !actions -->
          </form>
        </div>
      </div>
      <!-- ! panel -->
    </div>
  </div>
  <!-- ! box -->
</div>
